<template>

  <div>
    <van-nav-bar
        title="我的收藏"
        left-text="返回"
        left-arrow
        @click-left="back"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <van-cell v-for="room in roomList">
          <template #title>
            <div class="dv1">
              <van-card
                  class="card"
                  tag="标签"
                  price="2.00"
                  origin-price="10.00"
                  desc="描述信息"
                  title="商品标题"
              >
                <template #price>{{'￥'+room.price}}</template>
                <template #origin-price>{{(room.price)/0.8}}</template>
                <template #desc>{{room.info}}<br></template>
                <template #title>{{room.name}}<br></template>
                <template #tags>
                  <div v-if="room.type === 1" style="margin-top: 5px">
                    <van-tag plain type="primary" size="large">经济</van-tag>
                    <van-tag plain type="primary" size="large" style="margin-left: 5px">舒适</van-tag>
                  </div>
                  <div v-if="room.type === 2" style="margin-top: 5px">
                    <van-tag plain type="primary" size="large">高大上</van-tag>
                    <van-tag plain type="primary" size="large" style="margin-left: 5px">设备齐全</van-tag>
                  </div>
                  <div v-if="room.type === 3" style="margin-top: 5px">
                    <van-tag plain type="primary" size="large">奢华</van-tag>
                    <van-tag plain type="primary" size="large" style="margin-left: 5px">环境好</van-tag>
                    <van-tag plain type="primary" size="large" style="margin-left: 5px">贴心服务</van-tag>
                  </div>
                  <div v-if="room.type === 4" style="margin-top: 5px">
                    <van-tag plain type="primary" size="large">限时优惠</van-tag>
                    <van-tag plain type="primary" size="large" style="margin-left: 5px">小礼品</van-tag>
                  </div>
                  <van-rate v-model="room.rate" style="display: flex; justify-content: flex-end; height: 25px" allow-half></van-rate>
                </template>

                <template #num>
                  <van-button v-if="room.status === 1" type="primary" @click="reserveRoom(room)">预订</van-button>
                  <van-button v-if="room.status === 2" disabled type="primary">预订</van-button>
                </template>

                <template #thumb>
                  <van-image v-if="room.type === 1" src="src/image/room4.png"></van-image>
                  <van-image v-if="room.type === 2" src="src/image/room5.png"></van-image>
                  <van-image v-if="room.type === 3" src="src/image/room6.png"></van-image>
                  <van-image v-if="room.type === 4" src="src/image/room7.png"></van-image>
                </template>
              </van-card>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>

  </div>

</template>

<script setup>

import {ref} from "vue";
import {showToast} from "vant";
import {post} from "../util/request.js";
import axios from "axios";

// 导入pinia
import {useStore} from "../pinia/index.js";
// 声明pinia
const store = useStore();

// 导入useRouter使用路由
import { useRouter } from "vue-router";
// 声明变量
const router = useRouter()

// 要传递给后端的参数
let listType = ref("");
const roomList = ref([
  {
    id:0,
    name:'',
    type:0,
    rate:0,
    position:'',
    status:0,
    info:'',
    price:0.0,
    utime:''
  }
])
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const back = () => {
  history.back();
}

const activeName = ref("a");
listType.value = activeName.value

const showRoomList = () => {

    axios({
      method:'post',
      url:'http://localhost:8081/api/hotel/roomCollect/show',
    }).then((data) => {
      // 接收响应数据,data封装了响应的数据
      const res = data.data;
      // console.log("data"+JSON.stringify(res.data));
      if (res.code == 0) {
        roomList.value = res.data
      } else {
        showToast("获取失败")
      }
      // 加载状态结束
      loading.value = false;
      // 加载完毕停止加载
      finished.value = true;
    }).catch(function (){
      showToast("服务器异常")
    })

}

const onLoad = () => { // list展示时触发,用于获取数据

  if (refreshing.value) {
    roomList.value = [];
    refreshing.value = false;
  }
  // 发起axios异步请求,刷新
  showRoomList()

};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

const reserveRoom = (room) => {

  console.log("room:" + JSON.stringify(room))
  // 存入全局变量
  store.setRoom(room)

  // 跳转路由页面
  router.push("/reserveRoom")

}

</script>

<style scoped>

.card {
  --van-card-font-size: 15px;
  --van-card-title-line-height: 30px;
  --van-card-desc-line-height:30px;
  --van-card-thumb-size: 170px;
  --van-card-price-integer-font-size: 25px;
  --van-card-price-font-size: 20px;
  --van-card-price-color: red;
  --van-card-origin-price-font-size: 15px;
}

.dv1 {
  text-align: left
}


</style>